<template>
  	<div id="editSeries">
  		<header>
  			<i @click="goBack()"></i>
  			<div>编辑系列课</div>
  		</header>
  		<div class="border-8"></div>

    	<ul class='single'>
	  		<li>
	  			<a>
					<label>系列课名称:</label>
		 			<input type="text" placeholder="请输入系列课名称" v-model='infoObj.course_name' />
	  			</a>
	  		</li>
	  		<li>
	  			<a>
					<label>排课计划:</label>
		 			<input type="text" placeholder="排课节数只能是2-100的正整数" v-model='classNum' />
	  			</a>
	  		</li>
	  		<li>
	  			<a class="descTitle">
					<label>系列课封面</label>
	  			</a>
	  		</li>
	  		<li class='no-border'>
	  			<a class="uploadImg">
					<div class="img" v-if="isShow">
						<img class="delIcon" src="../../image/icon_delete.png" width="16" height="16" @click="delSelectImg()" />
						<img class="selectImg" :src="infoObj.course_pic" width="50" height="50" />
					</div>
					<div class="upfileDiv">
						<img src="../../image/add_images.png" width="50" height="50" alt="" />
						<input type="file" name="file" class="upfile"  @change="upfile1" />
					</div>

	  			</a>
	  		</li>
	  		<div class="border-8"></div>
	  		<li>
	  			<a class="descTitle">
					<label>适宜人群</label>
	  			</a>
	  		</li>
	  		<li class="">
	  			<a class="courseDesc">
	  				<textarea placeholder="适宜人群" v-model='infoObj.program'></textarea>
	  			</a>
	  		</li>
	  		<li>
	  			<a class="descTitle">
					<label>系列课简介图片</label>
	  			</a>
	  		</li>
	  		<li class='no-border'>
	  			<a class="uploadImg">
					<div class="img" v-if="isShow" v-for='(val,index) in profilePic' :key='index'>
						<img class="delIcon" src="../../image/icon_delete.png" width="16" height="16" @click="delSelectImg()" />
						<img class="selectImg" :src="val" width="50" height="50" />
					</div>
					<div class="upfileDiv">
						<img src="../../image/add_images.png" width="50" height="50" alt="" />
						<input type="file" name="file" class="upfile"  @change="upfile2" />
					</div>
	  			</a>
	  		</li>
	  		<div class="border-8"></div>
	  		<li>
	  			<a @click='preserve' class="preserve">
	  				保 存
	  			</a>
	  		</li>
	  	</ul>
	</div>
</template>
<script>
	import { Indicator } from 'mint-ui';
	export default {
		data() {
			return {
				cid: '',
				infoObj: {},
				isShow: true,
				seriesName: '', 	//系列课名称
				classNum: '' ,  //排课计划2-100
				seriesUrl1: require('../../image/bg_pic.png'),  //系列课上传图片
				suitablePopulation: '', //使用人群
				profilePic: []  //系列课简介封面
			}
		},
		components: {

		},
		methods: {
			//初始化显示原来课程信息
			init() {
				// var seriesClass = JSON.parse(localStorage.getItem('seriesClass'));
				// console.log(seriesClass);
				// this.seriesName = seriesClass.seriesName;
				// this.classNum = seriesClass.classNum;
				// this.seriesUrl1 = seriesClass.seriesUrl1;
				//获取课程详情
				this.cid = this.$route.query.id;
				this.$api.get(this.$api.baseURLSchool,"select_cid/view_course_user/"+this.cid,{},r => {
					console.log(r);
					this.infoObj = r.data.info;
				},err => {
					console.log(err);
				})

			},
			//保存信息
			preserve() {
				if(this.infoObj.course_name&&this.infoObj.course_pic&&this.infoObj.program) {
					console.log(this.infoObj);
					this.$api.post(this.$api.baseURLSchool,"updatedata/course/edit",this.infoObj,r => {
						console.log(r);
						this.$router.back();
					},err => {
						console.log(err);
					})
				}else {
					this.$utils._toast("请检查填写是否完整");
				}
			},
			goBack() {
				this.$router.back();
			},
			openPicker() {
		        this.$refs.picker.open();
		    },
		    type() {

		    },
		    liveType() {

		    },
		    checkNum(e){   //只能输入数字
		        var value = e.target.value;
		        e.target.value = value.replace(/[^\d]/g, '');
		        this.classNum = e.target.value;
	        },
		    testClassNum() {
		    	if(this.classNum<2||this.classNum>200) {
                    this.$utils._toast('请输入2-100的正整数');
		    	}
		    },
		    handleConfirm(val) {
		    	this.showTime = true;
		    	var d = new Date(val);
		    	this.pickerValue = d.getTime();
		    	console.log(this.pickerValue);
		    },
			delSelectImg() {
				this.isShow = false;
			},
			upfile1: function() {
				var file = $(".upfile")[0].files[0];
				//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
				if(!/image\/\w+/.test(file.type)) {

					this.$utils._toast('请确保文件为图像类型');

					return false;
				}
				if(file.size > 5 * 1024 * 1024) {
					this.$utils._toast('上传图片不能超过5M');
					return false;
				}
				var _this = this;
				var reader = new FileReader();
				reader.readAsDataURL(file);
				// console.log(file);
				reader.onload = function(e) {
					var result = this.result;
					// console.log(result);
					_this.infoObj.course_pic = result;
					// result = result.substring(result.indexOf(",") + 1, result.length - 1);
					// console.log(result);
					// Indicator.open({
					// 	text: '上传中...',
					// 	spinnerType: 'fading-circle'
					// });
				}
			},
			upfile2: function() {
				var file = $(".upfile")[1].files[0];
				//这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
				if(!/image\/\w+/.test(file.type)) {

					this.$utils._toast('请确保文件为图像类型');

					return false;
				}
				if(file.size > 5 * 1024 * 1024) {
					this.$utils._toast('上传图片不能超过5M');
					return false;
				}
				var _this = this;
				var reader = new FileReader();
				reader.readAsDataURL(file);
				// console.log(file);
				reader.onload = function(e) {
					var result = this.result;
					// console.log(result);
					_this.profilePic.push(result);

					// result = result.substring(result.indexOf(",") + 1, result.length - 1);
					// console.log(result);
					// Indicator.open({
					// 	text: '上传中...',
					// 	spinnerType: 'fading-circle'
					// });
				}
			},
		},
		created() {
			this.init();
		},
		mounted() {
			var mySwiper = new Swiper ('#outSwiper', {
				onSlideChangeStart: function(swiper){
					var index = swiper.activeIndex;
					$('.nav div').removeClass();
		   			$('.nav div').eq(index).addClass("active");
			   }
			});
			$('.nav div').click(function(){
				console.log($(this).index());
			    mySwiper.slideTo($(this).index());
			    $(this).addClass('active').siblings().removeClass();
			});
		}
	}
</script>
<style lang="scss">
</style>
